<template>
	<a-modal
		:visible="visible"
		width="1100px"
		title="添加物资"
		class="select-delivery"
		centered
		destroyOnClose
		:maskClosable="false"
		@cancel="cancel"
		wrapClassName="a-modal-dialog">
		<!-- 1231 -->
		<a-form ref="formRef" class="flex-container-nomal add-model" style="height: 60vh" layout="vertical">
			<div class="flex1 auto-y">
				<div class="tab-box">
					<a-space>
						<a-select
							ref="select"
							v-model:value="paramsQuery.typeId"
							allow-clear
							placeholder="请选择物品种类"
							style="width: 200px"
							:options="modalInfos.listDictList"
							:field-names="{label: 'name', value: 'id'}"
							@change="handleChange(paramsQuery.typeId)"></a-select>
						<a-select
							ref="select"
							v-model:value="paramsQuery.configId"
							allow-clear
							placeholder="请选择物品名称"
							style="width: 200px"
							:options="modalInfos.itemName"
							:field-names="{label: 'name', value: 'id'}"
							@change="getList(1)"></a-select>
					</a-space>
					<div class="model-table">
						<vxe-grid ref="grid" v-bind="gridOptions">
							<template #status="{row}">
								<a-tag :color="'processing'">{{ row.status == 2 ? '未使用' : '无' }}</a-tag>
							</template>
							<template #attributionStatus="{row}">
								{{ row.attributionStatus == '1' ? '业主' : '公司' }}
							</template>

							<template #brandName="{row}">
								{{ row.brandName || '-' }}
								/ {{ row.assetModel || '-' }} /
								{{ row.assetSpecification || '-' }}
							</template>
						</vxe-grid>
						<!-- <div class="bottom-btn">
							<a-space>
								<a-button type="primary" @click="getEvent">确定</a-button>
							</a-space>
						</div> -->
					</div>
				</div>
			</div>
		</a-form>
		<template #footer>
			<a-button type="primary" @click="getEvent">确定</a-button>
		</template>
	</a-modal>
</template>
<script setup lang="ts">
	import {onMounted, reactive, ref, watch, toRef} from 'vue'
	import {houseConfigGetList} from '@/api/dictionary'
	import {message} from 'ant-design-vue'
	import {VxeGridProps} from 'vxe-table'
	import {pagerConfig, proxyConfigProps} from 'yuxin-base/src/utils/vxe-table'
	import settingApi from 'yuxin-base/src/api/setting-api'
	const props = withDefaults(
		defineProps<{
			visible: boolean
			data?: any[]
			attributionStatus?: number | string | null
		}>(),
		{
			attributionStatus: '',
			visible: false
		}
	)
	// 查询返回参数
	const paramsQuery = reactive({
		typeId: null,
		configId: null,
		status: 2,
		attributionStatus: toRef(props, 'attributionStatus')
	})
	const formRef = ref()
	const modalInfos = reactive({
		listDictList: [],
		itemName: [],
		optionalNum: 0
	})

	const focus = () => {
		console.log('focus')
	}
	const handleChange = (value: string) => {
		let index = modalInfos.listDictList.findIndex((item: any) => item.id === value)
		if (index !== -1) {
			modalInfos.itemName = modalInfos.listDictList[index].metaList
		}
		getList(1)
	}
	onMounted(() => {})
	const getListDict = () => {
		settingApi.getDicListByLabel('HOUSECONFIG').then((res: any) => {
			modalInfos.listDictList = res.data || []
		})
	}

	watch(
		() => props.visible,
		(newVal: boolean) => {
			if (newVal) {
				getListDict()
				let time = setTimeout(() => {
					getTableData()
					clearTimeout(time)
				}, 500)
			}
		}
	)
	const getTableData = () => {
		if (props.data && props.data.length) {
			let list = [...props.data]
			for (let i in list) {
				let index = grid.value.getTableData().tableData.findIndex((item: any) => item.id === list[i].id)
				if (index != -1) {
					grid.value.setCheckboxRow(grid.value.getTableData().tableData[index], true)
				}
			}
		}
	}
	const getList = (page?: number) => {
		grid.value.commitProxy(page === 1 ? 'reload' : 'query')
	}
	const emit = defineEmits(['update:visible', 'success'])
	const cancel = () => {
		emit('update:visible', false)
	}
	const getEvent = () => {
		const $table = grid.value
		const selectRecords = $table.getCheckboxRecords()

		let checkList = []
		if (props.data && props.data.length) {
			for (let i in selectRecords) {
				// houseRoomIds.push(selectRecords[i].houseRoomId)
				let index = props.data.findIndex(o => o.id === selectRecords[i].id)
				if (index == -1) {
					checkList.push(selectRecords[i])
				}
			}
		} else {
			checkList = $table.getCheckboxRecords()
		}

		if (!checkList.length) {
			message.error('请选择物资')
			return
		}
		emit('success', checkList)
		emit('update:visible', false)
	}
	const grid = ref()
	const gridOptions = reactive<VxeGridProps>({
		size: 'small',
		height: 'auto',
		showOverflow: true,
		rowConfig: {
			isHover: true
		},
		checkboxConfig: {
			checkStrictly: true,
			highlight: true,
			trigger: 'row'
		},
		columns: [
			{
				title: '选择',
				width: 60,
				align: 'center',
				fixed: 'left',
				type: 'checkbox'
			},
			{
				title: '状态',
				width: 100,
				align: 'center',
				slots: {
					default: 'status'
				}
			},
			{
				title: '所属方',
				width: 60,
				slots: {
					default: 'attributionStatus'
				}
			},
			{
				title: '编号',
				width: 160,
				field: 'no'
			},
			{
				title: '种类',
				minWidth: 50,
				align: 'center',
				field: 'typeName'
			},
			{
				title: '物品名称',
				minWidth: 150,
				field: 'configName'
			},
			{
				title: '品牌/型号/规格(m)',
				minWidth: 200,
				slots: {
					default: 'brandName'
				}
			},
			{
				title: '单价(元)',
				minWidth: 100,
				field: 'price'
			},
			{
				title: '所在位置',
				minWidth: 240,
				field: 'currentPosition'
			}
		],
		pagerConfig: pagerConfig,
		proxyConfig: {
			props: proxyConfigProps,
			ajax: {
				query({page: {currentPage: current, pageSize: size}}) {
					return houseConfigGetList({...paramsQuery, current, size})
				}
			}
		}
	})
</script>
<style lang="less">
	.select-delivery {
		.ant-modal-body {
			padding: 0;

			.flex-container-nomal {
				height: 60vh;

				.flex1 {
					padding: 12px 12px;

					.tab-box {
						height: 100%;

						.model-table {
							height: calc(100% - 62px);
							margin-top: 10px;
						}

						.bottom-btn {
							position: absolute;
							bottom: 15px;
						}
					}
				}
			}
		}
	}
</style>
